<template>
  <div class="work-experience-container">
    <TitleB
      :title="projectInfos.moduleTitle"
      iconName="el-icon-s-cooperation"
      :backgroundColor="myThemeColor"
      @titleBValUpdate="onModuleTitleUpdate"
      @btnClick="onBtnClick"
    ></TitleB>
    <Project
      v-for="project in projectInfos.projectList"
      :key="project.id"
      :experience="project"
      @projectInfoUpdate="onProjectInfoUpdate(project.id, $event)"
    ></Project>
  </div>
</template>

<script>
import TitleB from '@/components/base/TitleB.vue'
import Project from '@/components/Modules/Project.vue'
import { nanoid } from 'nanoid'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      projectInfos: {
        moduleTitle: '项目经历',
        projectList: [
          {
            id: '1',
            // 项目时间
            time: '2016-2020',
            // 项目名称
            proName: '在线可编辑简历模板系统',
            // 工作描述
            proDesc: ['能够选择模板', '自定义简历内容', '在线生成pdf格式'],
          },
        ],
      },
    }
  },
  props: {
    projectProps: {
      type: Object,
      default: function () {
        return {
          moduleTitle: '项目经历',
          projectList: [
            {
              id: '1',
              // 项目时间
              time: '2016-2020',
              // 项目名称
              proName: '在线可编辑简历模板系统',
              // 工作描述
              proDesc: ['能够选择模板', '自定义简历内容', '在线生成pdf格式'],
            },
          ],
        }
      },
    },
    moduleId: {
      type: String,
      default: nanoid(),
    },
  },
  computed: {
    ...mapGetters(['myThemeColor']),
  },
  created() {
    this.projectInfos = { ...this.projectProps }
    this.id = this.moduleId
  },
  methods: {
    onModuleTitleUpdate(newTitle) {
      this.projectInfos.moduleTitle = newTitle
      this.updateStore()
    },
    onBtnClick(tag) {
      switch (tag) {
        case 'add':
          this.addProject()
          break
        case 'delete':
          this.deleteProject()
          break
        case 'remove':
          this.removeModule()
          break
      }
    },
    // 添加一个项目
    addProject() {
      let id = nanoid()
      const project = {
        id,
        // 项目时间
        time: '项目时间',
        // 项目名称
        proName: '项目名称',
        // 项目描述
        proDesc: ['项目描述1', '项目描述2', '项目描述3'],
      }
      this.projectInfos.projectList.push(project)
      this.updateStore()
    },
    // 删除一个项目
    deleteProject() {
      if (this.projectInfos.projectList.length <= 1) {
        this.$message.warning('至少需要一条数据')
      } else {
        this.projectInfos.projectList.pop()
        this.updateStore()
      }
    },
    // 某一条项目经历信息修改
    onProjectInfoUpdate(proId, newProInfo) {
      this.projectInfos.projectList.some((item) => {
        if (item.id === proId) {
          Object.assign(item, newProInfo)
          return
        }
      })
      this.updateStore()
    },
    // 移除该模块
    removeModule() {
      this.$store.commit('removeModule', this.id)
    },
    // 修改仓库数据
    updateStore() {
      const newData = { props: this.projectInfos, id: this.id }
      this.$store.commit('setModule', newData)
    },
  },
  components: {
    TitleB,
    Project,
  },
}
</script>

<style lang="less" scoped>
.work-experience-container {
  width: 100%;
  padding: 0 15px;
  margin-bottom: 5px;
}
</style>
